<template>
    <div class="camera-component-container" v-if="isCameraComponentShow">
        <div class="canvas-container" v-if="isPreviewPhoto">
            <canvas id="photoCanvas"></canvas>
            <div class="tool-btn-box canvas-tool">
                <button type="button" class="btn back-btn" @click="onClickCancelSavePhoto"></button>
                <button type="button" class="btn save-photo-btn" @click="onClickSavePhoto"></button>
            </div>
        </div>
        <video id="cameraVideo" autoplay="autoplay"></video>
        <div :class="['mask', {'mask-id-card-front': isIdCardFront, 'mask-id-card-back': !isIdCardFront}]">
            <div class="tool-btn-box">
                <button type="button" class="btn photo-album-btn">
                    <input type="file" style="opacity: 0; display: inline-block;width: 100%; height: 100%" accept="image/*">
                </button>
                <button type="button" class="btn take-photo-btn" @click="onClickTakePhoto"></button>
                <button type="button" class="btn back-btn" @click="onClickBackBtn"></button>
            </div>
            <div class="scanner-bar"></div>
        </div>
    </div>
</template>

<script lang="ts" src="./camera-component.ts">
</script>

<style scoped lang="scss">
    @import "./camera-component.scss";
</style>
